import loadImg from '@/assets/default.gif';
import bus from '@/EventBus.js';

// 没有显示过的图片记录
let imgs = [];

/**
 * 判断当前图片是否应该加载；
 */
function isLoad(obj) {

    // 获取元素距离视口的距离；
    let top = obj.el.getBoundingClientRect().top;

    // 获取元素的高度；
    let height = obj.el.getBoundingClientRect().height || 100;

    // 距离视口的距离小于视口的高度，小于元素本身的高度；
    if (top <= window.innerHeight && top >= -height) {
        // 表示当前的 图片可以显示
        let newImg = new Image();
        newImg.onload = function () {
            obj.el.src = obj.src;
        }
        newImg.src = obj.src;

        // 从数组中移除以及加载过的图片
        imgs = imgs.filter(item => item.el !== obj.el);
    }
}

/**
 * 滚动事件处理函数；
 */
function handleScroll(dom) {
    // 没有元素，不进行处理
    if (!dom) {
        return
    }
    // 判断有哪些图片符合加载的要求，符合要求的进行加载
    imgs.forEach(item => {
        isLoad(item);
    })
}

// 监听事件总线的 mainScroll 事件
bus.$on('mainScroll', handleScroll)

export default {
    inserted(el, bind) {
        /**
         * 1. 初次加载图片的时候，收集所有没有不应该加载的图片；
         * 2. 加载应该加载的图片；
         */
        let now = {
            el,
            src: bind.value
        };
        imgs.push(now);
        el.src = loadImg;
        isLoad(now);
    },
    unbind(el) {
        /**
         * 当用到图片的组件，销毁的时候，将这个未处理的图片，从缓存中去除；
         */
        imgs = imgs.filter(item => item.el !== el);
    }
}